<template>
  <div>
      <!-- 监听属性 -->
      <button @click="counter++">点我计数器加一</button>
      {{ reverse_msg }}
      <!-- 绑定样式 -->
      <div :class="{ active:isactive }"></div>
      <!-- 遍历显示 -->
      <ul>
          <li v-for="(item,index) in tlist" :key="index" :class="{on:index%2==0,off:index%2!=0}">
              {{index}}{{ item.text }}
          </li>
      </ul>
      <div v-if="type=='A'">A</div>
      <div v-else-if="type=='B'">B</div>
      <div v-else>C</div>
      <h1 v-show="ok">我看见你了</h1>
      {{ msg }}
  </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'你好，这里是vue',
            ok:true,
            type:'C',
            tlist:[{text:'汽车'},{text:'水果'},{text:'鲜花'},{text:'电脑'},],
            isactive:1,
            counter:0
        }
    },
    //监听属性
    watch: {
        counter:function(nval,oval){
            console.log('计数器的变化：'+'从'+oval+'变成了'+nval)
        }
    },
    //计算属性
    computed: {
        //反转
        reverse_msg:function(){
            return '$'+this.msg.split('').reverse().join('')
        }
    },
}
</script>

<style>
    .on {background: yellow}
    .off {background: greenyellow}
    .active {
        width: 100px;
        height: 100px;
        background: yellowgreen;
    }
</style>